<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        /* 类选择器  class
        1. 设置给元素的 class 属性，写什么都可以，有意义即可
        2. css 中 .class的值即可命中对应的元素
      */
        
        .city {
            font-weight: 900;
            font-size: 30px;
            color: orange;
        }
        
        .goods {
            /* 元素 如果同时添加了 class 的样式和元素选择器的样式
            .class的优先级高一些 > 元素选择器
        */
            background-color: yellow;
        }
        
        span {
            font-style: italic;
            background-color: skyblue;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <h1 class="goods">美诚月饼碰瓷美心月饼</h1>
    <p>
        9月18日上午，
        <span class="goods"> 美诚月饼</span>生产地之一的辖区市场监管局——
        <span class="city">广州市花都区</span> 市场监督管理局工作人员告诉极目新闻记者，他们此前已经开始了对广州市美诚食品有限公司的核查工作，对该公司的营业资质以及合作授权问题进行了核查。目前，他们正与合肥市场监督管理部门沟通具体的核查情况，已经发出了相应的协查函件，后续会出具体的核查报告。 美诚月饼是否涉嫌虚假宣传？对此，该 <span class="city"> 合肥方面</span> 向极目新闻记者表示，关于虚假宣传的定性问题，还是要等他们与<span class="city"> 合肥方面</span
      >的办案人员进行沟通研究，依法依规进行研判。目前，他们还无法给出一个结论。
    </p>
  </body>
</html>